<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>亲戚称呼换算工具</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>亲戚称呼换算工具</h1>
            <p>快速查询复杂的亲戚关系称呼</p>
        </header>

        <main>
            <div class="calculator">
                <div class="input-section">
                    <h2>选择关系</h2>

                    <div class="relation-chain" id="relationChain">
                        <!-- 起始关系 -->
                        <div class="relation-item">
                            <span class="relation-label">我</span>
                        </div>
                    </div>

                    <div class="relation-actions">
                        <div class="relation-selector">
                            <select id="relationSelect">
                                <option value="">-- 请选择关系 --</option>
                                <option value="father">父亲</option>
                                <option value="mother">母亲</option>
                                <option value="husband">丈夫</option>
                                <option value="wife">妻子</option>
                                <option value="son">儿子</option>
                                <option value="daughter">女儿</option>
                                <option value="elder_brother">哥哥</option>
                                <option value="younger_brother">弟弟</option>
                                <option value="elder_sister">姐姐</option>
                                <option value="younger_sister">妹妹</option>
                            </select>
                            <button id="addRelation">添加</button>
                        </div>
                        <button id="clearRelations">清空</button>
                    </div>
                </div>

                <div class="result-section">
                    <h2>计算结果</h2>
                    <div class="result">
                        <div class="result-detail">
                            <span class="result-label">关系：</span>
                            <span class="result-value" id="resultRelation">-</span>
                        </div>
                        <div class="result-chain" id="resultChain"></div>
                    </div>
                    <button id="calculate">计算称呼</button>
                </div>
            </div>

            <div class="common-relations">
                <h2>常见称呼</h2>
                <div class="relation-grid" id="commonRelations">
                    <!-- 常见关系会在JS中动态填充 -->
                </div>
            </div>
        </main>

        <footer>
            <p>© 2025 亲戚称呼换算工具</p>
        </footer>
    </div>

    <script src="js/relation.js"></script>
    <script src="js/app.js"></script>
</body>

</html>